<template>
  <div class="home">
    <swiper
      class="home-swiper"
      :list="baseList"
      dots-position="center"
      dots-class="swiper-dots"
      auto loop
      height="3.2rem">
    </swiper>
    <grid class="home-menus"
      :show-lr-borders="false" :show-vertical-dividers="false">
      <grid-item link="/follow" label="跟单">
        <img slot="icon" src="../../assets/imgs/home/home_menu1@2x.png">
      </grid-item>
      <grid-item :link="{ path: '/forum'}" label="论坛">
        <img slot="icon" src="../../assets/imgs/home/home_menu2@2x.png">
      </grid-item>
      <grid-item :link="{ path: '/rank'}" label="高手">
        <img slot="icon" src="../../assets/imgs/home/home_menu3@2x.png">
      </grid-item>
      <!-- <grid-item link="/signin">
        <img slot="icon" src="../../assets/imgs/home/home_menu4@2x.png">
        <span slot="label">签到</span>
      </grid-item> -->
      <grid-item>
        <div class="checkin" @click="handleCheckin">
          <img slot="icon" src="../../assets/imgs/home/home_menu4@2x.png">
          <span slot="label">签到</span>
        </div>
      </grid-item>
    </grid>
    <div class="home-cate-box">
      <cate-cell
        :img="require('../../assets/imgs/cell/cate1@2x.png')"
        title="热门彩种"
        desc="精彩联赛 助力梦想"
        :showBorder="false"
      ></cate-cell>
      <grid class="cate-hot" :show-lr-borders="false" >
        <grid-item link="/football">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-hot1@2x.png">
            <div class="cate-desc">
              <div class="title">竞彩足球</div>
              <div class="desc">欧洲杯预选赛</div>
            </div>
          </div>
        </grid-item>
        <grid-item link="/footballsingular">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-hot1@2x.png">
            <div class="cate-desc">
              <div class="title">竞足单关</div>
              <div class="desc">欧洲杯预选赛</div>
            </div>
          </div>
        </grid-item>
      </grid>
      <grid class="cate-hot" :show-lr-borders="false" >
        <grid-item link="/basketball">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-hot2@2x.png">
            <div class="cate-desc">
              <div class="title">竞彩篮球</div>
              <div class="desc">NBA常规赛开赛！</div>
            </div>
          </div>
        </grid-item>
        <grid-item link="/basketballsingular">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-hot2@2x.png">
            <div class="cate-desc">
              <div class="title">竞篮单关</div>
              <div class="desc">NBA常规赛开赛！</div>
            </div>
          </div>
        </grid-item>
      </grid>
    </div>
    <div class="home-cate-box" v-if="dayOrderList&&dayOrderList.length">
      <cate-cell
        :img="require('../../assets/imgs/cell/cate2@2x.png')"
        title="每日神单"
        desc="精彩联赛 助力梦想"
        :showBorder="false"
      ></cate-cell>
      <div class="cate-daily-list">
        <div class="cate-item" v-for="(item, index) in dayOrderList" :key="index">
          <img slot="icon" :src="item.avatar">
          <div class="cate-desc">
            <div class="title">{{item.nickname}}</div>
            <div class="desc">中奖金额: <span class="money">{{item.bonus_price}}</span></div>
          </div>
        </div>
        <!-- <div class="cate-item">
          <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
          <div class="cate-desc">
            <div class="title">蓝精灵</div>
            <div class="desc">中奖金额: <span class="money">9999.00</span></div>
          </div>
        </div>
        <div class="cate-item">
          <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
          <div class="cate-desc">
            <div class="title">蓝精灵</div>
            <div class="desc">中奖金额: <span class="money">9999.00</span></div>
          </div>
        </div>
        <div class="cate-item">
          <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
          <div class="cate-desc">
            <div class="title">蓝精灵</div>
            <div class="desc">中奖金额: <span class="money">9999.00</span></div>
          </div>
        </div> -->
      </div>
      <!-- <grid class="cate-daily" l="2" :show-lr-borders="false" >
        <grid-item link="/home/1">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
            <div class="cate-desc">
              <div class="title">蓝精灵</div>
              <div class="desc">中奖金额: <span class="money">9999.00</span></div>
            </div>
          </div>
        </grid-item>
        <grid-item link="/home/1">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
            <div class="cate-desc">
              <div class="title">蓝精灵</div>
              <div class="desc">中奖金额: <span class="money">9999.00</span></div>
            </div>
          </div>
        </grid-item>
      </grid>
      <grid class="cate-daily" l="2" :show-lr-borders="false" >
        <grid-item link="/home/1">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
            <div class="cate-desc">
              <div class="title">蓝精灵</div>
              <div class="desc">中奖金额: <span class="money">9999.00</span></div>
            </div>
          </div>
        </grid-item>
        <grid-item link="/home/1">
          <div class="cate-item">
            <img slot="icon" src="../../assets/imgs/home/icon-daily@2x.png">
            <div class="cate-desc">
              <div class="title">蓝精灵</div>
              <div class="desc">中奖金额: <span class="money">9999.00</span></div>
            </div>
          </div>
        </grid-item>
      </grid> -->
    </div>
    <div class="home-cate-box">
      <cate-cell
        :img="require('../../assets/imgs/cell/cate3@2x.png')"
        title="投注公告"
        desc="精彩联赛 助力梦想"
      ></cate-cell>
      <div class="betting-box">
        <div class="betting">
          <div class="bettingwrap">
            <vue-scroll :data="betMessageList"  :class-option="options" class="betting-warp">
              <ul class="flow-list" :class="{cls: betMessageList.length>1}" v-if="betMessageList.length">
                <li class="flow-item" v-for="(item, index) in betMessageList" :key="index">
                  <span class="name">{{item.nickname}}</span>
                  <span class="desc">{{item.lottery_name}}<span class="money">{{item.price}}</span>{{item.currency}}</span>
                  <span class="time">{{item.create_time}}</span>
                </li>
              </ul>
            </vue-scroll>
          </div>
        </div>
      </div>
    </div>
    <checkin :show="showCheckin" @close="showCheckin=false"></checkin>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import CateCell from '@/components/CateCell';
import Checkin from '@/components/Checkin';

export default {
  name: 'Home',
  components: {
    CateCell,
    Checkin
  },
  data () {
    return {
      baseList: [
        // {
        //   url: 'javascript:',
        //   img: 'http://www.51pptmoban.com/d/file/2014/01/23/f03220aa5cc066bea0d4d2d355365f18.jpg',
        //   payload: 'javascript:'
        // }, {
        //   url: 'javascript:',
        //   img: 'http://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/lvpics/w=1000/sign=fc4ae564c9fc1e17fdbf88317aa0f703/a8ec8a13632762d048e0f6cda6ec08fa503dc6e2.jpg'
        // }, {
        //   url: 'javascript:',
        //   img: 'http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/w=1000/sign=605fb83f95dda144da0968b28287d1a2/95eef01f3a292df58c76b039be315c6034a87360.jpg'
        // }
      ],
      betMessageList: [ // 投注公告
        // {
        //   'member_id': '1',
        //   'nickname': '蓝***灵',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '232.00',
        //   'currency': '元',
        //   'create_time': '11-17 17:34'
        // },
        // {
        //   'member_id': '2',
        //   'nickname': '大***堂',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-12 15:30'
        // },
        // {
        //   'member_id': '2',
        //   'nickname': '大***堂',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-12 15:30'
        // },
        // {
        //   'member_id': '1',
        //   'nickname': '嘻*啊1',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-11 15:30'
        // },
        // {
        //   'member_id': '2',
        //   'nickname': '嘻*啊2',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-12 15:30'
        // },
        // {
        //   'member_id': '3',
        //   'nickname': '嘻*啊3',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-13 15:30'
        // },
        // {
        //   'member_id': '4',
        //   'nickname': '嘻*啊4',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-14 15:30'
        // },
        // {
        //   'member_id': '5',
        //   'nickname': '嘻*啊5',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-15 15:30'
        // },
        // {
        //   'member_id': '6',
        //   'nickname': '嘻*啊6',
        //   'lottery_name': '投注竞彩足球',
        //   'price': '30.00',
        //   'currency': '元',
        //   'create_time': '01-16 15:30'
        // }
      ],
      dayOrderList: [],
      showCheckin: false,
      homeData: {
        banner_list: [
          {
            type: '1',
            pic: 'http://img.try255.com/6c108e319224d5247aa87f2ed360fcb5?x-oss-process=image/quality,q_95',
            payload: ''
          }
        ],
        bet_message_list: [
          {
            member_id: '1',
            nickname: '嘻**1',
            lottery_name: '竞彩足球',
            price: '30.00',
            currency: '元',
            create_time: '01-15 18:07'
          }
        ],
        bonus_message_list: [
          {
            member_id: '1',
            nickname: '嘻**1',
            content: '喜中竞彩足球 89.00 元',
            create_time: '01-15 18:07'
          }
        ],
        day_order_list: [
          {
            member_id: '1',
            nickname: '嘻嘻啊1',
            avatar: 'https://www.try255.com/statics/avatar/1_160.png',
            total_price: '200',
            bonus_price: '0.00'
          }
        ]
      }
    };
  },
  computed: {
    options () {
      return {
        singleHeight: 25,
        waitTime: 2000,
        openTouch: false,
        limitMoveNum: 5
      }
    }
  },
  mounted () {
    localStorage.removeItem('matchCache');
    this.getHomeData();
    this.getUseInfo();
  },
  methods: {
    ...mapActions({
      getHomeInfo: 'home/getHomeInfo',
      setSign: 'home/setSign',
      getMineInfo: 'mine/mineInfo'
    }),
    getHomeData () {
      this.getHomeInfo().then(res => {
        if (res) {
          // res.banner_list = [
          //   {
          //     'type': '1',
          //     'pic': 'http://img.try255.com/6c108e319224d5247aa87f2ed360fcb5?x-oss-process=image/quality,q_95',
          //     'payload': ''
          //   },
          //   {
          //     'type': '2',
          //     'pic': 'http://www.51pptmoban.com/d/file/2014/01/23/f03220aa5cc066bea0d4d2d355365f18.jpg',
          //     'payload': 'https://www.baidu.com'
          //   }
          // ]
          let bannerList = res.banner_list || [];
          bannerList.forEach(item => {
            item.img = item.pic;
            item.url = item.payload;
            if (+item.type === 1) {
              item.url = 'javascript:;'
            }
          });
          this.baseList = bannerList;
          this.betMessageList = res.bet_message_list || [];
          this.dayOrderList = res.day_order_list || [];
        }
      })
    },
    getUseInfo () {
      this.getMineInfo();
    },
    handleCheckin () {
      this.setSign().then(res => {
        this.showCheckin = true;
      })
    }
  }
};
</script>

<style lang="less">
  @import '../../assets/styles/mixins.less';
  .home {
    background: #f7f7f7;
    .home-menus {
      background: #ffffff;
      &::before {
        border-top: none;
      }
      .weui-grid {
        padding: 0.2rem 10px;
        &::after {
          border-bottom: none;
        }
        .weui-grid__icon {
          width: 0.89rem;
          height: 0.89rem;
        }
        .weui-grid__label {
          font-size: 0.26rem;
          color: #333333;
        }
      }
      .checkin {
        img {
          display: block;
          width: 0.89rem;
          height: 0.89rem;
          margin: 0 auto;
        }
        span {
          display: block;
          font-size: 0.26rem;
          color: #333333;
          margin-top: 5px;
          text-align: center;
        }
      }
    }
    .home-cate-box {
      margin-top: 0.14rem;
      background: #ffffff;
      .cate-hot {
        &::before {
          // border: none;
        }
        .weui-grid {
          padding: 0.3rem 0.1rem 0.3rem 0.3rem;
          .cate-item {
            display: flex;
            img {
              display: block;
              width: 1rem;
              height: 1rem;
            }
            .cate-desc {
              flex: 1;
              display: flex;
              flex-flow: column wrap;
              justify-content: center;
              // align-content: center;
              width: 100%;
              overflow: hidden;
              margin-left: 0.2rem;
              .title {
                // margin: auto 0;
                line-height: 0.4rem;
                font-size: .28rem;
                color: #333333;
                .ellipsis()
              }
              .desc {
                // margin: auto 0;
                line-height: 0.3rem;
                font-size: .22rem;
                color: #999999;
                .ellipsis()
              }
            }
          }
        }
      }
      .cate-daily-list {
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        .cate-item {
          display: flex;
          position: relative;
          // width: 50%;
          flex: 1;
          padding: 0.2rem 0 0.2rem 0.3rem;
          box-sizing: border-box;
          &::before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }
          &:nth-child(even)::after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            bottom: 0;
            border-right: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
          }
          img {
            display: block;
            width: 0.8rem;
            height: 0.8rem;
          }
          .cate-desc {
            flex: 1;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            // align-content: center;
            width: 100%;
            overflow: hidden;
            margin-left: 0.08rem;
            .title {
              // margin: auto 0;
              line-height: 0.4rem;
              font-size: .28rem;
              color: #333333;
              .ellipsis()
            }
            .desc {
              // margin: auto 0;
              line-height: 0.3rem;
              font-size: .22rem;
              color: #999999;
              .money {
                font-family: PingFangSC-Regular;
                font-size: 0.32rem;
                font-style: italic;
                color: #ff0000;
              }
              .ellipsis()
            }
          }
        }
      }
      .cate-daily {
        .weui-grid {
          padding: 0.2rem 0 0.2rem 0.3rem;
        }
        .cate-item {
          display: flex;
          img {
            display: block;
            width: 0.8rem;
            height: 0.8rem;
          }
          .cate-desc {
            flex: 1;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            // align-content: center;
            width: 100%;
            overflow: hidden;
            margin-left: 0.08rem;
            .title {
              // margin: auto 0;
              line-height: 0.4rem;
              font-size: .28rem;
              color: #333333;
              .ellipsis()
            }
            .desc {
              // margin: auto 0;
              line-height: 0.3rem;
              font-size: .22rem;
              color: #999999;
              .money {
                font-family: PingFangSC-Regular;
                font-size: 0.32rem;
                font-style: italic;
                color: #ff0000;
              }
              .ellipsis()
            }
          }
        }
      }
    }
    .betting-box {
      padding: 0.3rem 0.3rem 0.4rem 0.3rem;
      box-sizing: border-box;
    }
    .betting {
      position: relative;
      // padding: 0.24rem 0.3rem;
      padding: 0.16rem 0.3rem;
      height: 2.78rem;
      box-sizing: border-box;
      background: #f7f7f7;
      border-radius: 0.06rem;
      overflow: hidden;
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0.3rem;
        top: 0.34rem;
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background: #D44743;
        // background: #3F8FEB;
        z-index: 99;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0.3rem;
        bottom: 0.34rem;
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background: #D44743;
        // background: #3F8FEB;
        z-index: 99;
      }
      .bettingwrap {
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0.68rem;
          width: 0.12rem;
          height: 0.12rem;
          border-radius: 50%;
          background: #D44743;
          // background: green;
          z-index: 100;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 1.68rem;
          width: 0.12rem;
          height: 0.12rem;
          border-radius: 50%;
          background: #D44743;
          // background: green;
          z-index: 100;
        }
      }
      .betting-warp {
        position: relative;
        overflow: hidden;
        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 0.18rem;
          left: 0.05rem;
          bottom: 0;
          width: 0.02rem;
          height: 2rem;
          background: #D44743;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 1.18rem;
          width: 0.12rem;
          height: 0.12rem;
          border-radius: 50%;
          background: #D44743;
          // background: gold;
          z-index: 100;
        }
      }
      .flow-list {
        position: relative;
        // height: 2.34rem;
        overflow: hidden;
        // &.cls::before {
        //   content: '';
        //   display: block;
        //   position: absolute;
        //   top: 0.15rem;
        //   left: 0.05rem;
        //   bottom: 0;
        //   width: 0.02rem;
        //   height: 2rem;
        //   background: #D44743;
        // }
        .flow-item {
          position: relative;
          line-height: 0.34rem;
          font-size: 0.24rem;
          padding-left: 0.34rem;
          padding-top: 0.08rem;
          padding-bottom: 0.08rem;
          // margin-bottom: 0.16rem;
          &:last-child {
            margin-bottom: 0;
          }
          // &::before {
          //   content: "";
          //   display: block;
          //   position: absolute;
          //   left: 0;
          //   top: 0.19rem;
          //   width: 0.12rem;
          //   height: 0.12rem;
          //   border-radius: 50%;
          //   background: #D44743;
          // }
          // &::after {
          //   content: '';
          //   display: block;
          //   position: absolute;
          //   top: 0;
          //   left: 0.05rem;
          //   bottom: 0;
          //   width: 0.02rem;
          //   // height: 2rem;
          //   background: #D44743;
          // }
          // &:first-child::after {
          //   top: 0.19rem;
          // }
          // &:last-child::after {
          //   bottom: 0.19rem;
          // }
          .name {
            // width: 0.82rem;
            width: 1.4rem;
            color: #3F8FEB;
            overflow: hidden;
            display: inline-block;
            height: 0.28rem;
            line-height: 0.28rem;
            vertical-align: middle;
          }
          .desc {
            // margin-left: 0.22rem;
            color: #666666;
            letter-spacing: 0.01rem;
            .money {
              color: #ff0000;
            }
          }
          .time {
            float: right;
            color: #999999;
          }
        }
      }
    }
  }
</style>
